<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script  src="../js/vue.js"></script>
</head>
<body>

<!--
   vue中的组件化开发
    轮播图
      A.html
          1.html 标签划分网页结构
          2.css  优化网页布局   base.css
          3.javascript  定时器  单击事件    base.js
     B.html
          1.html 标签划分网页结构
          2.css  优化网页布局     base.css
          3.javascript  定时器  单击事件    base.js

    组件:  将实现某种特定需求所需要的html,css,js等资源整合在一起就形成了一个组件  组件可以复用  提升代码的使用率

    组件开发的形式:
       1. 单文件组件      xxx.vue  html  css js      常用
       2. 非单文件组件    一个文件中可以定义多个组件   .html
    组件作用域划分:   组件注册的位置决定组件的作用域
       1. 全局组件    Vue
       2. 局部组件    注册在其他组件中的组件

  组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。
  仅有的例外是像 el 这样根实例特有的选项
-->

<div id="app">

</div>

<script>

    //  全局组件    Vue.component('组件名',{})     非单文件组件
    Vue.component('customer1',{
        template:'<div><h1>hello customer1</h1></div>'
    })

    Vue.component('customer2',{
        template:'<div><customer1></customer1><h1>hello customer2</h1></div>'
    })

    /*
         全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中
    *     通过vue创建的实例都可以使用 customer1组件   可以通过组件标签实现组件的引用
    * */
    let vm = new Vue({
        el:'#app',
        template: '<div><customer2></customer2></div>',
        data:{},
        methods:{}
      })

</script>


</body>
</html>